<template>
    <div>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()">
            <Icon type="ios-arrow-back"/>
            返回
        </Button>
        <Card class="line-style" v-for="(item,index) in streetList" :key="item.sence_id">
            <div class="line-wrap">
                <div class="line-title" style="flex-direction:column;justify-content:center">
                    <p>{{item.sence_name}}</p>
                </div>
                <div class="line-main">
                    <Form :ref="'streetList'+item.sence_id" :model="item" :rules="formRules" :label-width="100">
                      <Row>
                          <Col span="7" >
                              <FormItem label="人流量" prop="flow">
                                  <Input type="number" number v-model="item.flow" placeholder="请输入人流量">
                                      <span slot="append">人</span>
                                  </Input>
                              </FormItem>
                          </Col>
                          <Col span="4">
                              <FormItem label="是否营业" prop="status">
                                  <i-switch v-model="item.status" size="large">
                                      <span slot="open">营业</span>
                                      <span slot="close">停业</span>
                                  </i-switch>
                              </FormItem>
                          </Col>
                          <Col span="7">
                              <FormItem label="上报日期" prop="imp_date">
                                  <DatePicker type="date" :options="options1" @on-change="dateChange($event,index)"  placeholder="请选择上报日期"
                                              :value="item.imp_date" format="yyyy-MM-dd"></DatePicker>
                              </FormItem>
                          </Col>
                      </Row>
                    </Form>
                    <div class="line-button" v-if="!showDetail">
                        <Button type="primary" @click="validateForm('streetList'+item.sence_id,index)">保存</Button>
                    </div>
                </div>
            </div>
        </Card>

    </div>
</template>

<script>
import { getDictInfoList, insert, update, getList } from '@/api/outbreak-management/city-operation/public-places/public-place'

// 公共场所信息添加
export default {
  data () {
    const validateInt = (rule, value, callback) => {
      if (value % 1 !== 0) {
        callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    return {
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      streetList: [],
      // 保存状态码
      state: '',
      // 提示框
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      // 添加表单/修改表单
      formCustomEntertainment: {
        date: '',
        name: '',
        type: '社会娱乐场所',
        level: 1,
        flow: 0,
        status: true
      },
      // 表单规则
      formRules: {
        flow: [
          { required: true, type: 'number', message: '人流量必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '人流量数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '上报时间必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 日期转字符串
    dateChange (date, index) {
      console.log(this.streetList)
      for (let i = 0; i < this.streetList.length; i++) {
        this.streetList[i].imp_date = date
      }
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 校验保存数据
    validateForm (name, index) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          this.currentIndex = index
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    // 保存
    handleSubmit (name) {
      let streetList = this.streetList[this.currentIndex]
      if (streetList.id) {
        let { sence_id, flow, status, imp_date, id } = streetList
        if (status) {
          status = 0
        } else {
          status = 1
        }
        let street = { sence_id: sence_id, flow: flow, status: status, imp_date: imp_date, id: id }
        update(street).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.formType = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        let { sence_id, flow, status, imp_date } = streetList
        if (status) {
          status = 0
        } else {
          status = 1
        }
        let street = { sence_id: sence_id, flow: flow, status: status, imp_date: imp_date }
        insert(street).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    // 获取街道列表
    getDictInfoList () {
      getDictInfoList({}).then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          let streetList = []
          res.forEach(item => {
            let { label, value } = item
            let formObj = {
              sence_name: label,
              sence_id: value,
              flow: 0,
              status: '',
              imp_date: ''
            }
            streetList.push(formObj)
          })
          this.streetList = streetList
        }
      })
    },
    // 修改状态
    isEditStatus () {
      if (this.$route.query && this.$route.query.imp_date) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.imp_date)
      } else {
        this.getDictInfoList()
      }
    },
    getEditData (imp_date) {
      getList({ imp_date }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          res.forEach(item => {
            if (item.status === '0') { item.status = true } else if (item.status === '1') { item.status = false }
            item.imp_date = this.$common.moment(item.imp_date).format('YYYY-MM-DD')
          })
        }
        this.streetList = res
      })
    }
  },
  created () {
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>
<style scoped>

</style>
